<template>
  <div class="app-container ">
    <!-- 图表 -->
     <el-row  class="half-height" >
      <el-col :span="24">
        <el-card >
          <template #header><PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> &nbsp;
            <span style="vertical-align: middle;">数据统计</span>
          </template>
            <div ref="articlestats" style="height: 400px;" />
        </el-card>
      </el-col>

     </el-row>

     <el-row :gutter="20">
      <el-col :span="12">
      </el-col>
      <el-col :span="12">
      </el-col>
     </el-row>

  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const articlestats = ref(null);
// 仿造数据
const response = {
  data: {
    commandStats: [
      {
        name: "技术",
        value: 123
      },
      {
        name: "日常",
        value: 321
      },
      {
        name: "新闻",
        value: 123
      },
      {
        name: "游戏",
        value: 321
      },
    ]
  }
}

const { proxy } = getCurrentInstance();

onMounted(() => {
  getList();
});

function getList() {
  const articlestatsIntance = echarts.init(articlestats.value, "macarons");
  articlestatsIntance.setOption({
    tooltip: {
      trigger: "axis",
      formatter: "{b} <br/>{a} : {c}"
    },
    xAxis: {
      type: 'category',
      data: response.data.commandStats.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "文章",
        type: "line",
        data: response.data.commandStats.map(item => item.value),
        smooth: true,
        animationEasing: "cubicInOut",
        animationDuration: 1000,
        itemStyle: {
           color: '#fc5531' // 设置线条颜色为红色
         }
      }
    ]
  });

  window.addEventListener("resize", () => {
    articlestatsIntance.resize();
  });
}



// 页面跳转
function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
.app-container{
  height:89.1vh;
  
}
.half-height{
  height: 100%;
}
</style>

